<template>
  <div class="app-container">
    <query
      ref="query"
      @submit="pageLoad"
      @add="addHandle"
    />
    <grid
      ref="grid"
      :remote-method="loadData"
      :border="false"
      total-count-name="recordsCount"
    >
      <el-table-column align="center" label="ID" width="95">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="bookNo" label="BookNo" />
      <el-table-column align="center" prop="bookName" label="BookName" />
      <el-table-column align="center" prop="typeName" label="Type" />
      <el-table-column align="center" prop="category" label="Category" />
      <el-table-column align="center" label="Status">
        <template slot-scope="scope">
          <el-tag
            :type="['', 'success', 'danger'][scope.row.status - 1]"
          >{{ scope.row.status | statusText }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="lessee" label="Lessee" />
      <el-table-column align="center" prop="leaseStartTime" label="LeaseStartTime" />
      <el-table-column align="center" prop="leaseEndTime" label="LeaseEndTime" />
      <el-table-column align="center" label="Operate" width="300">

        <template slot-scope="scope">
          <el-button
            type="text"
            @click="showDetailDialog(scope.row.id)"
          >detail</el-button>
          <el-button
            type="text"
            @click="showLesseeDialog(scope.row.id)"
          >lessee</el-button>
          <el-popconfirm
            title="Confirm return the book?"
            confirm-button-text="OK"
            cancel-button-text="Cancel"
            @onConfirm="() => returnHandle(scope.row)"
          >
            <el-button
              slot="reference"
              style="margin: 0 10px;"
              type="text"
            >return</el-button>
          </el-popconfirm>
          <el-button
            type="text"
            @click="showEditDialog(scope.row.id)"
          >edit</el-button>
          <el-popconfirm
            title="Confirm deletion?"
            confirm-button-text="OK"
            cancel-button-text="Cancel"
            @onConfirm="() => deleteUser(scope.row.id)"
          >
            <el-button
              slot="reference"
              style="margin-left: 10px;"
              type="text"
            >delete</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </grid>
    <edit-dialog
      ref="editDialogRef"
      @close="pageLoad"
    />
  </div>
</template>

<script>
import { getList, deleteBook,
  returnBook, getType, getCategory } from '@/api/books'
import Grid from '@/components/Grid'
import { EditDialog, Query } from './components'

export default {
  filters: {
    statusText(value) {
      return {
        1: 'no lend',
        2: 'lended',
        3: 'overdue not return'
      }[value]
    }
  },

  components: {
    Grid,
    Query,
    EditDialog
  },

  data() {
    return {
      typeOptions: [],
      categoryOptions: []
    }
  },

  provide() {
    return {
      typeOptions: () => this.typeOptions,
      categoryOptions: () => this.categoryOptions
    }
  },

  async created() {
    this.typeOptions = await getType()
    this.categoryOptions = await getCategory()
  },
  mounted() {
    this.pageLoad()
  },
  methods: {
    pageLoad() {
      this.$refs.grid.loadData()
    },

    loadData() {
      const { params } = this.$refs.query || {}
      return getList(params).then(data => {
        return {
          data: data.items,
          recordsCount: data.total
        }
      })
    },

    addHandle() {
      this.$refs.editDialogRef.show()
    },

    /**
     * show edit or add dialog
     * @params id
     */
    showEditDialog(id) {
      this.$refs.editDialogRef.show(id)
    },

    /**
     * return the book
     */
    async returnHandle({ id: bookId, bookName }) {
      await returnBook({
        bookId
      })
      this.$message({
        type: 'success',
        message: `the book 《${bookName}》return success`
      })
    },

    showLesseeDialog() {

    },

    async deleteUser(id) {
      await deleteBook({ id })
      this.$message({
        type: 'success',
        message: 'delete success'
      })
    }

  }
}
</script>

<style scoped>
  .app-container {
    height: 100%;
  }
</style>
